<template>
  <div class="w-full h-full" :style="computedStyle">
    <div id="page-screen-index2-container" class="w-full h-full" v-loading="!info">
      <div id="page-screen-index2" class="page-screen-index2 flex flex-col h-full" v-if="info">
        <div :style="isScreen ? 'height: 330px' : 'height: 534px;'">
          <el-row :gutter="20" class="h-full">
            <el-col :span="7" class="relative flex flex-col h-full">
              <div>
                <div class="common-card">
                  <div class="flex items-center pt-2">
                    <img class="common-card-icon" src="../../../assets/screen/icon@2x(7).png" />
                    <span class="common-card-title">PUE监测</span>
                  </div>
                  <div class="flex p-2 pt-0">
                    <div class="flex-1">
                      <dv-decoration-9 class="m-auto" :style="isScreen ? 'width:100px;height:100px;' : 'width:140px;height:140px;'" :dur="6">
                        <div class="text-white px-2">{{info.puemon.pue}}</div>
                      </dv-decoration-9>
                    </div>
                    <div class="flex-1 pr-4 pl-4" :style="isScreen ? 'font-size:12px;line-height: 1.4;' : 'font-size:18px;line-height: 1.6;'">
                      <div class="flex justify-between mt-1" v-for="(value, key) in info.puemon" :key="key">
                        <span class="text-white">{{key.toLocaleUpperCase()}}</span>
                        <span class="text-screen">{{value}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div :class="isScreen ? 'pt-1' : 'pt-3'">
                <div class="common-card">
                  <div class="flex items-center pt-2">
                    <img class="common-card-icon" src="../../../assets/screen/icon@2x(7).png" />
                    <span class="common-card-title">GDC能效评估</span>
                  </div>
                  <div class="px-4">
                    <el-row :gutter="0" class="h-full">
                      <el-col :span="12" v-for="(i, index) in gdc" :key="index">
                        <div class=" text-center text-white" :class="isScreen ? 'text-xs pt-1' : 'text-base'">{{ i.name }}</div>
                        <div :style="isScreen ? 'height: 100px;' : 'height: 170px;'">
                          <component :is="i.component" :id="'nengyuan-' + index" :value="Number(i.cop)" class="w-full" :style="isScreen ? 'height:110px;' : 'height:200px;'" :isScreen="isScreen" />
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="10" class="relative flex h-full">
              <div class="w-full h-full relative">
                <img src="../../../assets/screen/WechatIMG88.jpg" class="absolute top-0 right-0 bottom-0 left-0 rounded-lg w-full h-full object-cover" :draggable="false" />
              </div>
            </el-col>
            <el-col :span="7" class="relative flex flex-col h-full">
              <div class="common-card">
                <div class="flex items-center pt-2">
                  <img class="common-card-icon" src="../../../assets/screen/icon@2x(7).png" />
                  <span class="common-card-title">设备状态</span>
                </div>
                <div class="flex px-2">
                  <div class="flex-1 text-center transparent-card-v3" :class="isScreen ? 'py-2' : 'py-4'">
                    <div style="color:#58DBFF;" :style="isScreen ? 'font-size:20px;' : 'font-size:30px;'">{{info.device.equi_online}}/{{info.device.equi_total}}</div>
                    <div class="text-white" :class="isScreen ? 'text-xs' : 'text-sm'">采集网关</div>
                  </div>
                  <div class="flex-1 text-center transparent-card-v3 ml-2" :class="isScreen ? 'py-2' : 'py-4'">
                    <div style="color:#58DBFF;" :style="isScreen ? 'font-size:20px;' : 'font-size:30px;'">{{info.device.meter_online}}/{{info.device.meter_total}}</div>
                    <div class="text-white" :class="isScreen ? 'text-xs' : 'text-sm'">设备总数</div>
                  </div>
                </div>
              </div>

              <div class="common-card mt-3 relative">
                <div class="flex items-center" :class="isScreen ? 'pt-3' : 'pt-2 pr-2'">
                  <img class="common-card-icon" src="../../../assets/screen/icon@2x(1).png" />
                  <span class="common-card-title">用电分析</span>
                  <span style="flex:1;"></span>
                  <el-radio-group v-model="item_type" size="mini" :style="isScreen ? 'transform:scale3d(.7,.7,.7);white-space: nowrap;' : ''">
                    <el-radio-button label="1">年</el-radio-button>
                    <el-radio-button label="2">月</el-radio-button>
                    <el-radio-button label="3">日</el-radio-button>
                  </el-radio-group>
                </div>
                <div id="yong_dian_fen_xi_chart" :style="isScreen ? 'height:155px;' : 'height:250px;'"></div>
                <!-- <div class="absolute text-white text-sm top-16 right-6">
                  <div class="text-sm">{{ info.items[item_type].item_detail[pieDataIndex].name }}</div>
                  <div>用量：{{ info.items[item_type].item_detail[pieDataIndex].yongliang }}</div>
                  <div>同比：{{ info.items[item_type].item_detail[pieDataIndex].tongbi }}</div>
                  <div>环比：{{ info.items[item_type].item_detail[pieDataIndex].huangbi }}</div>
                </div> -->
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="flex-1 h-0" :class="isScreen ? 'mt-1' : 'mt-4'">
          <el-row :gutter="20" class="h-full">
            <el-col :span="7" class="relative flex flex-col h-full">
              <div class="common-card h-full">
                <div class="flex items-center pt-2 pr-4">
                  <img class="common-card-icon" src="../../../assets/screen/icon@2x(7).png" />
                  <span class="common-card-title">环境监测</span>
                  <span style="flex:1;"></span>
                  <span class="text-999 cursor-pointer" :class="isScreen ? 'text-xs' : 'text-sm'" @click="wsModal = true">更多</span>
                </div>
                <div class="flex px-6 flex-col" :class="isScreen ? 'pt-1' : 'pt-2'">
                  <div class="flex-1 px-1 transparent-card-v4 flex items-center text-white px-5" :class="isScreen ? 'py-0.5 text-xs' : 'py-1 text-base'" v-for="(i, index) in hjjc" :key="index">
                    <span class="flex-1">{{ i.name }}</span>
                    <span class="flex-1">{{ i.value }}&nbsp;&nbsp;{{ i.unit }}</span>
                    <!-- <span class="inline-block w-12">
                      <span v-if="index === 0" class="text-sm cursor-pointer" @click="wsModal = true">
                        更多<i class="el-icon-arrow-right"></i>
                      </span>
                    </span> -->
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="10" class="relative h-full">
              <div class="h-full rounded-xl" id="energy_compare" style="background-color: rgba(0,0,0,.2);"></div>
            </el-col>
            <el-col :span="7" class="relative flex h-full">
              <dv-border-box-8 :dur="6" :class="isScreen ? 'p-2' : 'p-4 pb-5'">
                <dv-decoration-7 :style="isScreen ? 'height:20px;transform:scale3d(.8,.8,.8)' : 'height:30px;'">
                  <div class="theme-front-color px-2">告警信息</div>
                </dv-decoration-7>
                <div :class="isScreen ? 'mt-2' : 'mt-4'">
                  <dv-scroll-board :config="meterWarning" :style="isScreen ? 'height:160px' : 'height:200px'" />
                </div>
              </dv-border-box-8>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <el-dialog
      title="温湿度"
      width="600px"
      border
      :visible.sync="wsModal"
      :append-to-body="true">
      <el-table :data="wsList">
        <el-table-column label="仪表编号" prop="code" align="center" width="100"/>
        <el-table-column label="仪表名称" prop="name" align="center" width="100"/>
        <el-table-column label="最新温度(℃)" prop="wendu" align="center" width="100"/>
        <el-table-column label="最新湿度(%)" prop="shidu" align="center" width="100"/>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import myGauge from './components/my-gauge'
import myGauge2 from './components/my-gauge2'
import * as echarts from 'echarts'
import Charts from '@jiaminghi/charts'
import dataV from '@jiaminghi/data-view'
import Vue from 'vue'
Vue.use(dataV)

let pieChart = null

export default {
  data() {
    return {
      pageZoomRate: 1,
      info: null,
      meterWarning: {
        header: ['回路名称', '报警详情', '报警等级', '异常发生时间'],
        columnWidth: [100, 80, 80, 150],
        data: []
      },
      item_type: 1,
      pieDataIndex: 0,
      gdc: [
        {
          name: 'PUE等级',
          cop: 12.5,
          component: 'my-gauge'
        },
        {
          name: '碳排放等级',
          cop: 37.5,
          component: 'my-gauge2'
        }
      ],
      hjjc: [
        {
          name: '温度',
          value: 30,
          unit: '℃'
        },
        {
          name: '湿度',
          value: 57,
          unit: '%'
        },
        {
          name: 'PM2.5',
          value: 34.3,
          unit: 'μg/m³'
        },
        {
          name: '余压',
          value: 52,
          unit: 'Pa'
        }
      ],
      wsModal: false,
      wsList: [
        {
          code: 'T201037',
          name: '温湿度',
          wendu: 20.5,
          shidu: 57.5
        }
      ]
    }
  },
  computed: {
    computedStyle() {
      return this.$route.name === 'screenV2' ? {
        'background-color': '#233a6a',
        'padding': '5px'
      } : {}
    },
    isScreen() {
      return this.$route.name === 'screenV2'
    },
  },
  components: {
    myGauge,
    myGauge2
  },
  created() {
    window.onresize = () => {
      this.domResize()
    }
    this.domResize()
    this.getInfo()
  },
  watch: {
    item_type() {
      this.drawPie()
    },
  },
  methods: {
    getInfo() {
      this.$api.getHomeIndexInfo({
        'projectId': this.$util.cookies.get("cuuren_projectId"),
        "customerId":this.$util.cookies.get('customer_id')
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.info = res.data
          this.meterWarning.data = this.info.alarms.map(item => {
            return [
              // item.alarm_pname,
              item.alarm_lname,
              item.alarm_notes,
              item.alarm_leval_desc,
              // item.alarm_event_desc,
              item.alarm_event_time
            ]
          })
          this.drawPie()
          this.drawBar()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    drawBar() {
      const eng = this.info.eng
      this.$nextTick(() => {
        const chart = echarts.init(document.querySelector('#energy_compare'))
        chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          calculable: true,
          legend: {
            data: ['昨日碳排放', '碳排放'],
            itemGap: 5,
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            top: this.isScreen ? '20%' : '15%',
            left: '2%',
            right: '5%',
            bottom: '5%',
            containLabel: true
          },
          axisLabel: {
            color: '#fff'
          },
          xAxis: [
            {
              type: 'category',
              data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'kgCO2e',
              nameTextStyle: {
                color: '#fff'
              }
            }
          ],
          series: [
            {
              name: '昨日碳排放',
              type: 'bar',
              data: eng.yesday.map(Number)
            },
            {
              name: '碳排放',
              type: 'bar',
              data: eng.today.map(Number)
            }
          ]
        })
      })
    },
    drawPie() {
      const data = this.info.items[this.item_type].item_detail
      this.$nextTick(() => {
        if (pieChart) {
          pieChart.clear()
        }
        pieChart = echarts.init(document.querySelector('#yong_dian_fen_xi_chart'))
        pieChart.setOption({
          tooltip: {
            trigger: 'item',
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: this.isScreen ? '5%' : '8%',
            top: '15%',
            itemWidth: 14,
            itemHeight: 8,
            textStyle: {
              color: '#fff',
              fontSize: this.isScreen ? 10 : 12
            },
            formatter: function(name) {
              return name + '：' + data.find(i => i.name === name).yongliang
            }
          },
          series: [
            {
              type: 'pie',
              data: data.map(i => {
                return {
                  name: i.name,
                  value: Number(i.yongliang)
                }
              }),
              itemStyle: {
                borderRadius: 5,
                borderColor: 'transparent',
                borderWidth: 2
              },
              center: ['30%', '50%'],
              radius: this.isScreen ? ['50%', '66%'] : ['40%', '66%'],
              insideLabel: {
                show: true,
              },
              outsideLabel: {
                show: false,
                labelLineEndLength: 3,
                fontSize: this.isScreen ? 12 : 15
              },
              label: {
                position: 'center',
                show: true,
                fontSize: this.isScreen ? 13 : 16,
                color: '#fff',
                formatter: function () {
                  return data.map(i => Number(i.yongliang)).reduce((x, y) => x + y) + 'kW·h'
                }
              },
            }
          ]
        })

        // 监听 mouseover 事件
        pieChart.on('mouseover', (params) => {
          if (params.componentType === 'series') {
            this.pieDataIndex = params.dataIndex
          }
        })
      })
    },
    domResize() {
      this.$nextTick(() => {
        const dom = document.querySelector('#page-screen-index2-container')
        const x = dom.offsetWidth / 1800
        // console.log(dom.offsetWidth, dom.offsetHeight)
        if (x * 950 < dom.offsetHeight) {
          this.pageZoomRate = x
          return
        }
        this.pageZoomRate = dom.offsetHeight / 950
      })
    },
  }
}
</script>


<style lang="scss">
  .page-screen-index2 {
    // aspect-ratio: 1400 / 950;

    .dv-scroll-board {

      .header {
        font-size: 14px;
      }

      .row-item {
        font-size: 12px;
      }
    }

   .common-card-image {
     background-image: url(../../../assets/screen/box-bg@2x-2.png);
     background-size: 100% 100%;
     padding: 20px;
   }

   .common-card {
     background-image: url(../../../assets/screen/panel-bg@2x.png);
     background-size: 100% 100%;
     padding-bottom: 20px;

     &-icon {
       width: 70px;
       height: 62px;
       margin-left: -5px;
     }

     &-title {
       color: #AADDFF;
       font-size: 21px;
       margin-left: -10px;
     }
   }

   .transparent-card {
     background-image: url(../../../assets/screen/icon-333.png);
     background-size: 100% 100%;
   }

   .transparent-card-v2 {
     background-image: url(../../../assets/screen/box-bg@2x.png);
     background-size: 100% 100%;
   }

   .transparent-card-v3 {
     background-image: url(../../../assets/screen/box-bg@2x-1.png);
     background-size: 100% 100%;
   }

   .transparent-card-v4 {
     background-image: url(../../../assets/screen/box-bg@2x-2.png);
     background-size: 100% 100%;
   }
  }

  @media screen and (max-width: 900px) {
    .common-card {
      padding-bottom: 10px !important;

      &-icon {
        width: 35px !important;
        height: 31px !important;
        margin-left: 0 !important;
      }

      &-title {
        font-size: 14px !important;
        margin-left: -5px !important;
      }
    }

    .dv-scroll-board {

      .header {
        font-size: 10px !important;

        .header-item {
          padding: 2px !important;
          height: 25px !important;
          line-height: 25px !important;
        }
      }

      .row-item {
        font-size: 10px !important;

        .ceil {
          padding: 2px !important;
        }
      }
    }
  }
</style>
